let s = new URLSearchParams(location.search);
console.log(s.get('id'))
let l = s.get('id')
console.log(l)


function xiangqing(){

    let url = 'http://jx.xuzhixiang.top/ap/api/detail.php';
    axios.get(url,{
        params:{
            id:l
        }
    }).then(res=>{
        console.log(res.data.data);
        let arr = res.data.data;
        let html = '';
        html += `
        <div class="litimg">
                <img src="${arr.pimg}" alt="">
                <div class="zoom"></div>
            </div>
            <div class="bigimg">
                    <img src="${arr.pimg}" alt="">
                </div>
            <div class="underimg">
            </div>
            
         `
        let list = document.querySelector('.spec')
        list.innerHTML = html;
        let html1='';
        html1+=`
        <div class="item-title">${arr.pname}</div>
        <div class="dd">京东价&nbsp;${arr.pprice}</div>
        <div class="procart">
                <div class="choose-amount">
            
                    <input type="text" value="1" class="math">
                    <input type="button" value="-" class="minus">
                    <input type="button" value="+" class="plus">

                </div>

                <input type="button" value="加入购物车" class="addcart">
                
             </div>
        `
        let list1 =document.querySelector(".item-right");
        list1.innerHTML = html1;

        let Zoom = document.querySelector(".zoom");
let bigimg =  document.querySelector(".bigimg");
let litimg = document.querySelector(".litimg");
let Bigimg = bigimg.children[0];

litimg.onmouseover =function(){
    Zoom.style.display = "block";
    bigimg.style.display = "block"
}
litimg.onmouseout =function(){
    Zoom.style.display = "none";
    bigimg.style.display = "none"
}

litimg.onmousemove = function(e){
    let evt = e||window.event;
    let x = evt.pageX-list.offsetLeft-Zoom.offsetWidth/2;
    let y = evt.pageY-list.offsetTop-Zoom.offsetHeight/2;
    let mx = litimg.offsetWidth-Zoom.offsetWidth;
    let my = litimg.offsetHeight-Zoom.offsetHeight;
    x = x <= 0 ? 0 : x >= mx ? mx : x;
    y = y <= 0 ? 0 : y >= my ? my : y;
    Zoom.style.left = x+"px";
    Zoom.style.top = y+"px";
    Bigimg.style.left = -Zoom.offsetLeft*(Bigimg.offsetWidth/litimg.offsetWidth)+"px";
    Bigimg.style.top = -Zoom.offsetTop*(Bigimg.offsetHeight/litimg.offsetHeight)+"px";
}

        Addcartdata();
      


    })

    
}

xiangqing();








function Addcartdata(){
    let uid = localStorage.getItem('uid');
        localStorage.getItem(uid);    
        let Math = document.querySelector(".math");
        let Minus = document.querySelector(".minus");
        let Plus = document.querySelector(".plus");
        let Addbtn = document.querySelector(".addcart");
        let count = Math.value;
        // console.log(count);

    Minus.onclick = function(){
        if(Math.value <= 1){
            Math.value =1
        }else{
            Math.value--
        }
           
    };
    Plus.onclick = function(){
        Math.value++
        // console.log(1)
    };
    Addbtn.onclick = function(){
        let url = 'http://jx.xuzhixiang.top/ap/api/add-product.php';
        let pnum = Math.value;
// console.log(pnum)
    axios.get(url,{
        params:{
            uid:uid,
            pid:l,
            pnum
        }
    }).then(res=>{
        console.log(res.data)

    })
       
     }
}

